<template>
   
    <div>
        <h1>热销爆款</h1>
        <ul>
            <li @click="a">空调</li>
            <li @click="a">平板电视</li>
            <li @click="a">生活电器</li>
            <li @click="a">洗衣机</li>
            <li @click="a">冰箱</li>
            <li @click="a">厨房大电</li>
        </ul>
        <!-- 数据 -->
        <div>
            <ul>
                <li v-for="(item) in arr" :key="item.id">
                    {{ item.img }}
                    {{ item.name }}
                    {{ item.price }}
                    <button @click="add(item.id)">添加到购物车</button>
                </li>
            </ul>
        </div>

        <h3>购物车</h3>

        <div id="gouwu">
            <ul>
                <li v-for="(item, index) in arr1" :key="item.id">
                    {{ item.img }}
                    {{ item.name }}
                    {{ item.price }}
                    <button @click="del(index)">删除</button>
                    <span>{{ item.num }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            arr: [
                { id: 1, name: '美的空调', price: 6599 },
                { id: 2, name: '美的空调', price: 6599 },
                { id: 1, name: '美的冰箱', price: 6599 },
                { id: 2, name: '美的冰箱', price: 6599 },
                { id: 1, name: '美的洗衣机', price: 6599 },
                { id: 2, name: '美的洗衣机', price: 6599 },
            ],
            arr1: [],
            num: null,
        }
    },
    methods: {
        //    添加到购物车
        add(id) {
            var a = this.arr.find(item => item.id == id)
            var b = this.arr1.find(item => item.id == id)
            console.log(a);


            if (b) {
                b.num++
            } else {
                this.arr1.push(
                    { id: a.id },
                    { name: a.name },
                    { price: a.price }
                )
            }
        },
        // 删除
        del(index){
            this.arr1.splice(index,1)
        }
    },
    computed: {
    },
    
}
</script>
